<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/ZRT.js"></script>
		<script src="../js/zhuce.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/zhuce.css"/>
	</head>
	<body>
		<div class="header2">
			<div class="logo2">
				<img src="../img/logo.png" >
			</div>
			<div class="nav2">
				<ul class="max-nav2">
					<li>
					    <a class="firstNav">首页</a>
				    </li>
				    <li>
				        <a href="http://www.baidu.com" class="firstNav"><span>护肤</span></a>
				    </li> 
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>面膜</span></a>
				    </li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>彩妆</span></a>
				    </li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>男士</span></a>
				    </li>
				    <li class="secList">
						<a href="http://www.baidu.com" ="club firstNav">会员俱乐部</a>
						<ol>
							<li>
								<a href="">会员礼遇</a>
							</li>
							<li>
								<a href="">会员章程</a>
							</li>
							<li>
								<a href="">积分规则</a>
							</li>
				      </ol>
				    </li>
				    <li class="secList">
				      <a href="http://www.baidu.com" class="about firstNav">关于自然堂</a>
				      <ol>
							<li>
								<a href="">品牌故事</a>
							</li>
							<li>
								<a href="">品牌资讯</a>
							</li>
							<li>
								<a href="">品牌价值观</a>
							</li>
				      </ol>
				    </li>
					<li>
						<a href="http://www.baidu.com" class="firstNav">专柜查询</a>
					</li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav">防伪查询</a>
					</li>
				</ul>	
				<ul class="min-nav2">
					<li><a href="http://www.baidu.com"></a><img src="../img/search.png" ></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/shopping-cart.png" ></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/my.png" ></li>
				</ul>
			</div>
		</div>
		<div id="hea"></div>
		
		<div class="log">
			<div class="denglu">
				<ul>
					<li>登录</li>
					<li>|</li>
					<li style="border-bottom: #000000 3px solid;">注册</li>
				</ul>
			</div>
			
			<div class="input">
				<ul>
					<li>
					<span style="padding-right: 15px;">昵称*</span><input type="text" placeholder="&nbsp;&nbsp;请输入昵称"style="width: 378px;height: 44px;float: right;" id="id"/>
					</li>
					<li>
						<span>验证码*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><input type="text" placeholder="&nbsp;&nbsp;请输入验证码"style="width:174px ;height: 44px;">
							<input type="text"style="width: 85px;height: 44px;margin-left: 6px;">
							<div style="float: right;margin-top: 5px;">
								<p>看不清？</p>
								<p>换一张</p>
							</div>
					</li>
					<li>
						<span>手机号*</span><input type="text" placeholder="&nbsp;&nbsp;请输入手机号码"style="width: 378px;height: 44px;float: right;"/>
					</li>
					<li>
						<span>短信验证码*&nbsp;&nbsp;&nbsp;</span><input type="text" placeholder="&nbsp;&nbsp;短信验证码"style="width: 197px;height: 44px;">
							<button type="button"style="width: 134px;height: 44px;margin-left: 10px;background-color: #000000;color: white;">发送验证码</button>
					</li>
					<li>
						<span>密码*</span><input type="text" placeholder="&nbsp;&nbsp;请输入密码"style="width: 378px;height: 44px;float: right;" id="pass"/>
					</li>
					<li>
						<span>确认密码*</span><input type="text" placeholder="&nbsp;&nbsp;请再次输入你的密码"style="width: 345px;height: 44px;float: right;"/>
					</li>
					<li style="width: 1000px;">
					<input type="checkbox">我同意依照本使用条款和隐私政策对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。	
					</li>
					<li>
						<button type="button" style="width: 458px;height: 46px;background-color: #000000;color: white;line-height: 46px;text-align: center;margin-left: 258px;font-size: 24px;" id="btn">注册</button>
						</div>
					</li>
				</ul>
			
			</div>
		</div>
	
		<div id="last"></div>
	</body>
</html>
<script>
	$("#last").load("Tail.html");
	$("#hea").load("header.html",function(){
		
		$(window).scroll(function(){
			if($(this).scrollTop()>100){
				$(".header2").css("display","flex");
			}else{
				$(".header2").css("display","none");
			}
		})
	});
	

</script>
